<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>jRating : jquery plugin | Ajaxed star rating system with jQuery : MyjQueryPlugins.com</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<base href="http://www.myjqueryplugins.com/" />
	<link rel="shortcut icon" href="http://www.myjqueryplugins.com/favicon.ico" />
	<meta name="description" content="jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every detail from the number of the stars to if the stars can represent decimals or not. There is also an option to display small or big stars and images can be changed with any other file easily. Although the plugin can be used with any scripting language, a PHP file that handles the requests is already included in the download package." />
	<meta name="robots" content="index, follow, all" />
	<link rel="alternate" type="application/rss+xml" href="http://www.myjqueryplugins.com/rss.xml" title="RSS feeds" />
	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="static/css/content.css" media="screen" />
	<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
</head>
<body class="plugin_homepage">
	<div id="header">
	<div class="contain_header">
		<a href="http://www.myjqueryplugins.com/" id="logo"></a>
		
	
		<div class="share_myjqplugins">
			<a href="https://twitter.com/share" class="twitter-share-button" data-text="Tweet">Tweet</a>
			<g:plusone size="medium"></g:plusone>
			<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>
			<div class="clr"></div>
		</div>
		
		<div class="clr"></div>
		
		<div class="share"></div>
		<p class="slogan">MyjQueryPlugins, the easy way to animate your website with jQuery plugins !</p>
	</div>
</div>	
	<div id="main">
		<div class="breadcrumb">
			<a href="index" class="backTo">Home</a>
			
			<div class="clr"></div>
		</div>
		
		<div id="left_col">
			
		
			<h1>jRating, very flexible jQuery plugin for quickly creating an Ajaxed star rating system.</h1>
			
			
			<ul class="pushes">
				<li>
					<a href="jRating/download" class="push_download" rel="3">
						Download
						<p class="stats"><span>14942</span> downloads<br />v2.2 - 34.7Ko</p>
					</a>
				</li>
				<li>
					<a href="jRating/demo" class="plugin_demonstration">
						demonstration
					</a>
				</li>
				<li class="last">
					<a href="jRating/demo/viewJS" class="view_js">
						View JS File
					</a>
				</li>
			</ul>
			<div class="clr"></div>
			
			
			<ul class="navigation-tabs">
				<li><a href="#" class="see_description current">Description</a></li>
				<li><a href="#" class="see_implementation">Implementation</a></li>
				<li><a href="#" class="see_options">Options</a></li>
				<li><a href="#" class="see_methods">Methods</a></li>
				<li><a href="#" class="see_ontheweb">On the Web</a></li>
			</ul>
			<div class="clr"></div>
			
		
			
			<div class="description">
				<h2>jRating description</h2>
				<p class="infos">
					jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every detail from" the number of the stars" to "if the stars can represent decimals or not".<br /><br/>There is also an option to display small or big stars and images can be changed with any other file easily.<br /><br />Although the plugin can be used with any scripting language, a PHP file that handles the requests is already included in the download package.
				</p>
				
				<h2>jRating download package</h2>
				
				<ul class="arbo">
					<li class="iFOLDER">jRating v2.2						<ul>
							<li class="iFOLDER">jquery
								<ul>
									<li class="iJS">jquery.js</li>
									<li class="iCSS">jRating.jquery.css</li>
									<li class="iJS">jRating.jquery.js</li>
									<li class="iJS">jRating.jquery.min.js</li>
									<li class="iFOLDER">icons
										<ul>
											<li class="iPNG">stars.png</li>
											<li class="iPNG">small.png</li>
											<li class="iPNG">bg_jRatingInfos.png</li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="iFOLDER">php
								<ul>
									<li class="iPHP">jRating.php</li>
								</ul>
							</li>
							<li class="iPHP">index.php</li>
						</ul>
					</li>
				</ul>
			</div>
			
			<div class="implementation">
				<h2>jRating implementation</h2>
				
				<h3>1. First, include the CSS &amp; jQuery files</h3>
				<div class="sourceCode">
					<code>
						<span class="comment">&lt;!-- include CSS &amp; JS files --&gt;</span>
						<span class="niv1 comment">&lt;!-- CSS file --&gt;</span>
						<span class="niv1">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;jRating.jquery.css&quot; media=&quot;screen&quot; /&gt;</span>
						<span class="niv1 comment">&lt;!-- jQuery files --&gt;</span>
						<span class="niv1">&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;</span>
						<span class="niv1">&lt;script type=&quot;text/javascript&quot; src=&quot;jRating.jquery.js&quot;&gt;&lt;/script&gt;</span>
					</code>
				</div> 
				
				<h3>2. Add your HTML !</h3>
				
				<div class="sourceCode">
					<code>
						<span class="comment">&lt;!-- basic exemple --&gt;</span>
						<span class="niv1">&lt;div class=&quot;exemple&quot;&gt;</span>
						<span class="niv1"></span>
						<span class="niv2 comment">&lt;!-- in this exemple, 12 is the average and 1 is the id of the line to update in DB --&gt;</span>
						<span class="niv2">&lt;div class=&quot;basic&quot; id=&quot;12_1&quot;&gt;&lt;/div&gt;</span>
						
						<span class="niv1"></span>
						<span class="niv2 comment">&lt;!-- in this other exemple, 8 is the average and 2 is the id of the line to update in DB --&gt;</span>
						<span class="niv2">&lt;div class=&quot;basic&quot; id=&quot;8_2&quot;&gt;&lt;/div&gt;</span>
						<span class="niv1">&lt;/div&gt;</span>
					</code>
				</div> 
				
				
				<h3>3. Now, call the jRating plugin</h3>
				<div class="sourceCode">
					<code>
						<span class="niv1">&lt;script type=&quot;text/javascript&quot;&gt;</span>
						<span class="niv2">$(document).ready(function(){</span>
						<span class="niv1"></span>
						<span class="comment niv3">// simple jRating  call</span>
						<span class="niv3">$(&quot;.basic&quot;).jRating();</span>
						<span class="niv1"></span>
						<span class="niv1"></span>
						<span class="comment niv3">// more complex jRating  call</span>
						<span class="niv3">$(&quot;.basic&quot;).jRating({</span>
						<span class="niv4">step:true,</span>
						<span class="niv4">length : 20, // nb of stars</span>
						<span class="niv4">onSuccess : function(){</span>
						<span class="niv5"> alert('Success : your rate has been saved :)');</span>
						<span class="niv4">}</span>
						<span class="niv3">});</span>
						<span class="niv2">});</span>
						<span class="niv1">&lt;/script&gt;</span>
					</code>
				</div> 
				
			</div>
			
			<div class="options">
				<h2>jRating options</h2>
				
				<dl class="option">
					<dt><a href="" class="new" title="New option : Added in v2.1 !!"></a>  showRateInfo</dt>
					<dd class="typeData">Boolean</dd>
					<dd class="description_attr">Default :<span class="default_value">true</span> - Disabled the rate info. Can be set to <em>true</em> or <em>false</em></dd>
				</dl>
				<dl class="option">
					<dt>bigStarsPath</dt>
					<dd class="typeData">String</dd>
					<dd class="description_attr">Default : <span class="default_value">'jquery/icons/stars.png'</span> - Relative path of the large star picture (stars.png).</dd>
				</dl>
				<dl class="option">
					<dt>smallStarsPath</dt>
					<dd class="typeData">String</dd>
					<dd class="description_attr">Default : <span class="default_value">'jquery/icons/small.png'</span> - Relative path of the small star picture (small.png).</dd>
				</dl>
				<dl class="option">
					<dt>phpPath</dt>
					<dd class="typeData">String</dd>
					<dd class="description_attr">Default : <span class="default_value">'php/jRating.php'</span> - Relative path of the PHP page (jRating.php).</dd>
				</dl>
				<dl class="option">
					<dt>type</dt>
					<dd class="typeData">String</dd>
					<dd class="description_attr">Default : <span class="default_value">'big'</span> - Appearance type. Can be set to 'small' or 'big'.</dd>
				</dl>
				
				<dl class="option">
					<dt>step</dt>
					<dd class="typeData">Boolean</dd>
					<dd class="description_attr">Default : <span class="default_value">false</span> '- If set to <em>true</em>, filling of the stars is done star by star (step by step).</dd>
				</dl>
				<dl class="option">
					<dt>isDisabled</dt>
					<dd class="typeData">Boolean</dd>
					<dd class="description_attr">Default : <span class="default_value">false</span> '- If set to <em>true</em>, jRating is disabled.</dd>
				</dl>
				<dl class="option">
					<dt>length</dt>
					<dd class="typeData">Integer</dd>
					<dd class="description_attr">Default : <span class="default_value">5</span> - Number of star to display.</dd>
				</dl>
				<dl class="option">
					<dt>decimalLength</dt>
					<dd class="typeData">Integer</dd>
					<dd class="description_attr">Default : <span class="default_value">0</span> - Number of decimals in the rate.</dd>
				</dl>
				<dl class="option">
					<dt>rateMax</dt>
					<dd class="typeData">Integer</dd>
					<dd class="description_attr">Default : <span class="default_value">20</span> - Maximal rate.</dd>
				</dl>
				<dl class="option">
					<dt>rateInfosX</dt>
					<dd class="typeData">Integer</dd>
					<dd class="description_attr">Default : <span class="default_value">- 45</span> - In pixel - Absolute left position of the information box during mousemove.</dd>
				</dl>
				<dl class="option">
					<dt>rateInfosY</dt>
					<dd class="typeData">Integer</dd>
					<dd class="description_attr">Default : <span class="default_value">5</span> - In pixel - Absolute top position of the information box during mousemove.</dd>
				</dl>
			</div>
			
			<div class="methods">
				<h2>jRating methods</h2>
				
				<dl class="option">
					<dt>onSuccess</dt>
					<dd class="typeData">Function</dd>
					<dd class="description_attr">Default : <span class="default_value">null</span> - Callback function in case of success during rating.</dd>
				</dl>
				
				<dl class="option">
					<dt>onError</dt>
					<dd class="typeData">Function</dd>
					<dd class="description_attr">Default : <span class="default_value">null</span> - Callback function in case of failure during rating.</dd>
				</dl>
			</div>
			<div class="ontheweb">
				<h2>Who use jRating on the web ?</h2>
				
				<p>
					If you use jRating Plugin into your website and you want to be added here, <a href="contact" class="underline">please contact us !</a><br />
					We will add you with pleasure :)
				</p>
				
				<ul class="ex_websites">
					<li><a href="http://www.grammasrecipes.com" class="external-link">http://www.grammasrecipes.com</a></li>
					<li><a href="http://www.gutscheinrabatt.eu/otto-gutschein.htm" class="external-link">http://www.gutscheinrabatt.com</a></li>
					<li><a href="http://mobilebackendreviews.com/ratings.html" class="external-link">http://mobilebackendreviews.com</a></li>
					<li><a href="http://www.kredite-selbstaendige.com/" class="external-link">http://www.kredite-selbstaendige.com/</a></li>
				</ul>
			</div>
			<div class="clr"></div>
			
			
			<!-- Advertise Bottom -->
			<h2>How can you help us ?</h2>
<p class="dark">
	If you love our work, you can show us your admiration by having a look on the ads, free for you, good for us =).THANKS !
</p>

<div class="contain_pub_bottom">
	<script type="text/javascript"><!--
	google_ad_client = "ca-pub-1966946683093503";
	/* MyjQueryPlugins */
	google_ad_slot = "4296840614";
	google_ad_width = 728;
	google_ad_height = 90;
	//-->
	</script>
	<script type="text/javascript"
	src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
	</script>
</div>			
		</div>
		
		<!-- RIGHT COLUMN -->
		<div id="right_col">
	<div class="share_mjq">
		<ul>
			<li><a href="https://twitter.com/#!/alpixel_agency" class="twitter external-link" title="Follow us on twitter"></a></li>
			<li class="noMargin"><a href="http://feeds.feedburner.com/Myjqueryplugins" class="rss_feeds external-link" title="Subscribe to RSS Feeds"></a></li>
		</ul>
	</div>
	
	<div id="last_news">
		<h3>Last News</h3>
		<div class="news"><h4>QapTcha 4.1</h4><span class="date">Wed 7th March</span><div class="clr"></div><p><a href="QapTcha">New option 'autoSubmit' : auto submit form when the user has dragged it to end.</a></p></div><div class="sep"></div><div class="news"><h4>New Plugin : Thumba</h4><span class="date">Sun 12th February</span><div class="clr"></div><p><a href="Thumba">Thumbnails gallery as Google images...</a></p></div><div class="sep"></div>	</div>
	
	<div class="adv_right">
		<script type="text/javascript"><!--
		google_ad_client = "ca-pub-1966946683093503";
		/* MyjQueryPlugins Right */
		google_ad_slot = "3109565134";
		google_ad_width = 200;
		google_ad_height = 200;
		//-->
		</script>
		<script type="text/javascript"
		src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>
	</div>
	
	<div class="adv_right">
		<script type="text/javascript"><!--
		google_ad_client = "ca-pub-1966946683093503";
		/* MyjQueryPlugins Right */
		google_ad_slot = "3109565134";
		google_ad_width = 200;
		google_ad_height = 200;
		//-->
		</script>
		<script type="text/javascript"
		src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>
	</div>
</div>		
		<div class="clr"></div>
		
		

	</div>
	
	<div id="footer">
	MyjQueryPlugins is powered by <a href="http://www.alpixel.fr" class="underline external-link">ALPIXEL Agency</a> - <a href="contact" class="underline">Contact us</a>
	<a href="http://www.alpixel.fr" class="powered_by external-link"></a>
	<span>MyjQueryPlugins - 2012 - All Rights Reserved</span>
</div>	<script type="text/javascript" src="scripts/js/jquery.js"></script>	
<script type="text/javascript" src="scripts/js/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/js/jquery.ui.touch.js"></script>
<script type="text/javascript" src="scripts/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="scripts/js/global.js"></script>	
<script type="text/javascript" src="scripts/js/QapTcha.jquery.js"></script>	<!-- ANALYTICS -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-9271946-9']);
  _gaq.push(['_setDomainName', '.myjqueryplugins.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

<!-- TWITTER -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<!-- GOOGLE +1 -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<!-- FACEBOOK -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script></body>
</html>